<script setup lang="ts">
import * as echarts from 'echarts'
import 'echarts-wordcloud'
import { onMounted, reactive, ref, useTemplateRef } from 'vue';

const chartBar = useTemplateRef('chartbar')

// 接收父组件传递的图表配置项和数据
const props = defineProps(['chart_option'])

const { chart_option } = props
const option = reactive<any>({})

function initChart() {
    // 基于准备好的dom，初始化echarts实例
    let barChart = echarts.init(chartBar.value, 'dark')

    for (const filed in chart_option) {
        // 合并父组件传递的配置项和默认配置项
        option[filed] = chart_option[filed]
    }


    // 使用刚指定的配置项和数据显示图表。
    barChart.setOption(option);
    // 图表大小自适应
    window.addEventListener('resize', () => {
        barChart.resize()
    })
}

onMounted(initChart)
</script>

<template>
    <div id="chartbar" ref="chartbar"></div>
</template>

<style scoped lang="scss">
#chartbar {
    width: $chart-width;
    height: $chart-height;
}
</style>
